import React, { useState } from 'react';
import { withStaff } from 'utils/with-staff';
import Wrapper from 'components/app-layout/Wrapper';
import { useRouter } from 'next/router';

import {
  ContainerDeprecated,
  Box,
  Hero,
  HeroHeadline,
  HeroTitle,
  Text,
  DefaultError,
  Col,
  ErrorMessage,
  TextBox,
  Row,
  MainButton,
  Icon,
} from '@nova-hf/ui';
import {
  RoleType,
  useAddDelegateMutation,
  useCustomerQuery,
  useRemoveDelegateMutation,
} from 'typings/graphql';

import TableHead from 'components/table/TableHead';
import TableCell from 'components/table/TableCell';
import TableBody from 'components/table/TableBody';
import TableRow from 'components/table/TableRow';
import Table from 'components/table/Table';
import IconButton from 'components/icon-button/IconButton';
import { CUSTOMER } from 'beta/graphql/queries/customer';

const Vidskiptavinur = withStaff(() => {
  const router = useRouter();
  const [error, setError] = useState('');
  const [customerId, setCustomerId] = useState('');
  const [role, setRole] = useState('');

  if (!router?.query?.id) {
    return <div>VILLA VILLA</div>;
  }

  const { id } = router.query;
  const idAsString = router.query.id as string;
  const { data, loading } = useCustomerQuery({ variables: { input: { id: id as string } } });
  const [removeDelegateMutation, { loading: loadingRemove }] = useRemoveDelegateMutation({
    refetchQueries: [{ query: CUSTOMER, variables: { input: { id: id } } }],
    awaitRefetchQueries: true,
  });
  const [addDelegateMutation, { loading: loadingAdd }] = useAddDelegateMutation({
    refetchQueries: [{ query: CUSTOMER, variables: { input: { id: id } } }],
    awaitRefetchQueries: true,
  });

  const onRemoveClick = async (id: string, delegateId: string) => {
    try {
      if (delegateId) {
        const { data: removeDelegateData } = await removeDelegateMutation({
          variables: { input: { id: id, delegateId: delegateId } },
        });
        if (removeDelegateData?.removeDelegate?.error) {
          throw new Error('Something went wrong');
        }
      }
    } catch (e) {
      alert(e);
    }
  };

  const onAddClick = async (id: string, customerId: string, role: RoleType) => {
    try {
      if (customerId && role && id) {
        const { data: addDelegateData } = await addDelegateMutation({
          variables: { input: { id: id, customerId: customerId, role: role } },
        });
        if (addDelegateData?.addDelegate?.error) {
          throw new Error('Something went wrong');
        }
      }
    } catch (e) {
      alert(e);
    }
  };

  const onSubmit = async (e?: React.FormEvent) => {
    setError('');
    if (e) {
      e.preventDefault();
    }

    await onAddClick(id as string, customerId, role as RoleType);
  };
  if (loading) return <div>loooading</div>;

  return (
    <Wrapper header="light">
      <Hero accentColor="pink" subHero background="dark" color="light" withDock lessPadding>
        <HeroHeadline accentColor={'pink'}>
          <HeroTitle subHero color={'white'}>
            {data?.customer ? data?.customer?.name : 'fannst ekkert'}
          </HeroTitle>
        </HeroHeadline>
      </Hero>
      <ContainerDeprecated>
        <Box
          display="flex"
          flexDirection="row"
          alignItems="stretch"
          gap="medium"
          marginY={10}
          paddingY={10}
        >
          {data?.customer?.legalEntity?.__typename == 'Person' ? (
            <Box>
              <Text variant="h5">Viðskiptavinur</Text>
              <Text variant="pMediumBold" color="pink">
                Nafn
              </Text>
              <Text variant="pMediumRegular">{data.customer?.name}</Text>
              <Text variant="pMediumBold" color="pink">
                Tölvupóstfang
              </Text>
              <Text variant="pMediumRegular">{data.customer?.email}</Text>
              <Text variant="pMediumBold" color="pink">
                Kom í viðskipti
              </Text>
              <Text variant="pMediumRegular">{data.customer?.created}</Text>
              <Box paddingTop={5}>
                <Text variant="h5">Þjóðskrá</Text>
                <Text variant="pMediumBold" color="pink">
                  Kennitala
                </Text>
                <Text variant="pMediumRegular">{data.customer?.legalEntity?.nationalId}</Text>
                <Text variant="pMediumBold" color="pink">
                  Nafn
                </Text>
                <Text variant="pMediumRegular">{data.customer?.legalEntity?.name}</Text>
                <Text variant="pMediumBold" color="pink">
                  Heimilisfang
                </Text>
                <Text variant="pMediumRegular">
                  {data.customer?.legalEntity?.address}, {data.customer?.legalEntity?.postCode},{' '}
                  {data.customer?.legalEntity?.country}
                </Text>
                <Text variant="pMediumBold" color="pink">
                  Fæðingardagur
                </Text>
                <Text variant="pMediumRegular">{data.customer?.legalEntity?.dateOfBirth}</Text>
                <Text variant="pMediumBold" color="pink">
                  Fjölskyldunúmer
                </Text>
                <Text variant="pMediumRegular">
                  {data.customer?.legalEntity?.familyRegistrationCode}
                </Text>
                <Text variant="pMediumBold" color="pink">
                  Hjúskaparstaða
                </Text>
                <Text variant="pMediumRegular">{data.customer?.legalEntity?.maritalStatus}</Text>
                <Text variant="pMediumBold" color="pink">
                  Er kerfiskennitala?
                </Text>
                <Text variant="pMediumRegular">
                  {data.customer?.legalEntity?.isSystemId ? 'Já' : 'Nei'}
                </Text>
                <Text variant="pMediumBold" color="pink">
                  Bein markaðssetning heimil?
                </Text>
                <Text variant="pMediumRegular">
                  {data.customer?.legalEntity?.hasBannedDirectMarketing === '' ? 'Já' : 'Nei'}
                </Text>
              </Box>
            </Box>
          ) : data?.customer?.legalEntity?.__typename === 'Organization' ? (
            <>
              <Box>
                <Text variant="h5">Viðskiptavinur</Text>
                <Text variant="pMediumBold" color="pink">
                  Nafn
                </Text>
                <Text variant="pMediumRegular">{data?.customer?.name}</Text>
                <Text variant="pMediumBold" color="pink">
                  Tölvupóstfang
                </Text>
                <Text variant="pMediumRegular">{data?.customer?.email}</Text>
                <Text variant="pMediumBold" color="pink">
                  Kom í viðskipti
                </Text>
                <Text variant="pMediumRegular">{data?.customer?.created}</Text>
                <Box paddingTop={5}>
                  <Text variant="h5">Þjóðskrá</Text>
                  <Text variant="pMediumBold" color="pink">
                    Kennitala
                  </Text>
                  <Text variant="pMediumRegular">{data?.customer?.legalEntity?.nationalId}</Text>
                  <Text variant="pMediumBold" color="pink">
                    Nafn
                  </Text>
                  <Text variant="pMediumRegular">{data?.customer?.legalEntity?.name}</Text>
                  <Text variant="pMediumBold" color="pink">
                    Heimilisfang
                  </Text>
                  <Text variant="pMediumRegular">
                    {data?.customer?.legalEntity?.address}, {data?.customer?.legalEntity?.postCode},{' '}
                    {data?.customer?.legalEntity?.country}
                  </Text>
                  <Text variant="pMediumBold" color="pink">
                    Týpa
                  </Text>
                  <Text variant="pMediumRegular">
                    {data?.customer?.legalEntity?.organizationType}
                  </Text>
                  <Text variant="pMediumBold" color="pink">
                    Vat Númer
                  </Text>
                  <Text variant="pMediumRegular">{data?.customer?.legalEntity?.vatNumber}</Text>
                  <Text variant="pMediumBold" color="pink">
                    Kóði
                  </Text>
                  <Text variant="pMediumRegular">{data?.customer?.legalEntity?.industryCode}</Text>
                  <Text variant="pMediumBold" color="pink">
                    Kennitala Eiganda
                  </Text>
                  <Text variant="pMediumRegular">
                    {data?.customer?.legalEntity?.chairmanNationalId}
                  </Text>
                </Box>
                <Box paddingY={10}>
                  {data?.customer.delegates ? (
                    <>
                      <Text variant="h5">Tengiliðir</Text>
                      <Table>
                        <TableHead>
                          <TableCell>Nafn</TableCell>
                          <TableCell>Netfang</TableCell>
                          <TableCell>Hlutverk</TableCell>
                          <TableCell>Fjarlægja</TableCell>
                        </TableHead>
                        <TableBody>
                          {data.customer.delegates.map(({ id, type, customer }) => (
                            <TableRow key={id}>
                              <TableCell>{customer.name}</TableCell>
                              <TableCell>{customer.email}</TableCell>
                              <TableCell>{type}</TableCell>
                              <TableCell align="center">
                                <IconButton
                                  color="warning"
                                  onClick={() => {
                                    if (id) onRemoveClick(idAsString, id);
                                  }}
                                  disabled={loadingRemove}
                                >
                                  <Icon icon="close" />
                                </IconButton>
                              </TableCell>
                            </TableRow>
                          ))}
                        </TableBody>
                      </Table>
                      {loadingRemove || loadingAdd}
                      <form onSubmit={onSubmit}>
                        <Row>
                          <Col col={12}>{error && <ErrorMessage>{error}</ErrorMessage>}</Col>
                          <Col col={4}>
                            <TextBox
                              label="Customer ID"
                              onChange={(e: React.FormEvent<HTMLInputElement>) =>
                                setCustomerId(e.currentTarget?.value)
                              }
                              required
                              errorType="ssn"
                              name="customerId"
                            />
                          </Col>
                          <Col col={4}>
                            <TextBox
                              label="Role"
                              onChange={(e: React.FormEvent<HTMLInputElement>) =>
                                setRole(e.currentTarget?.value)
                              }
                              required
                              type="role"
                              name="role"
                              errorType="email"
                            />
                          </Col>
                        </Row>
                        <MainButton
                          colorScheme="pink"
                          dottedShadow="small"
                          icon="add"
                          text="Bæta Við"
                          onClick={onSubmit}
                        />
                      </form>
                    </>
                  ) : (
                    <Text>Engir skráðir Tengiliðir</Text>
                  )}
                </Box>
              </Box>
            </>
          ) : (
            <DefaultError />
          )}
        </Box>
      </ContainerDeprecated>
    </Wrapper>
  );
});

Vidskiptavinur.getInitialProps = () => {
  return {
    namespacesRequired: ['staff', 'vidskiptavinir'],
  };
};

export default Vidskiptavinur;